<template>
  <view class="collcet-box" @click="onClick">
    <image class="img" :src="getIsCollect" />
    <text class="txt">收藏</text>
  </view>
</template>

<script>
import { userCollect } from "api/user";
import { mapActions } from "vuex";
export default {
  name: "article-collect",
  data() {
    return {};
  },
  methods: {
    ...mapActions("user", ["isLogin"]),
    async onClick() {
      // 进行登录判定，登录之后允许发布评论
      if (!(await this.isLogin())) {
        return;
      }
      // 展示加载框
      uni.showLoading({
        title: "加载中",
      });
      await userCollect({
        articleId: this.articleData.articleId,
        isCollect: !this.articleData.isCollect,
      });
      // 关闭加载
      uni.hideLoading();
      // 更新数据
      this.$emit("changeCollect", !this.articleData.isCollect);
    },
  },
  props: {
    /**
     * 数据源
     */
    articleData: {
      type: Object,
      required: true,
    },
  },
  computed: {
    getIsCollect() {
      return this.articleData && this.articleData.isCollect
        ? "/static/images/collect.png"
        : "/static/images/un-collect.png";
    },
  },
};
</script>

<style lang="scss" scoped>
.collcet-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .img {
    width: $uni-img-size-base;
    height: $uni-img-size-base;
    color: $uni-text-color;
  }
  .txt {
    font-size: $uni-font-size-sm;
    color: $uni-text-color;
  }
}
</style>
